<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            height: 2000px;
        .big-box {
            width: 500px;
            height: 400px;
            border: 1px solid #ff0000;
            background-color: #7cb4db;
            /*定义相对定位*/
            /*position: relative;*/
            /*位置偏移*/
            /*top: 100px;*/
            /*left: 50px;*/
            /*right: 250px;*/
        }

        .big-box .box {
            width: 200px;
            height: 200px;
            background-color: #9c68c2;
            /*定义绝对定位*/
            /*position: absolute;*/
            /*top: 50px;*/
            /*left: 50px;*/
            /*固定定位*/
            position: fixed;
            top: 200px;
            right: 50px;
        }

        .big-box2 {
            height: 200px;
            background-color: #e3d157;
        }
    </style>
</head>
<body>
<div class="big-box2">盒子</div>
<div class="big-box">
    <div class="box">盒子</div>
</div>
</body>
</html>
